ul.categories {
  @apply .-mx-6;

  li {
    position: relative;

    &:before,
    &:last-child:after {
      @apply .absolute .pin-l .pin-r;
      content: '';
    }

    &:before {
      @apply .pin-t;
    }

    &:last-child:after {
      @apply .pin-b;
    }

    a {
      @apply .block .relative .px-6 .py-2 .text-grey-darkest;

      img {
        @apply .align-middle .mr-2;
        width: 24px;
      }

      &:hover {
        @apply .no-underline .z-10;
        background-color: $grey100;

        &:not(.router-link-active) {
          color: $linkColor;
        }
      }

      &.router-link-active {
        background-color: $grey200;
      }
    }
  }
}
